<!--
 * @Author       : GaoFeiXiang
 * @Date         : 2023-06-23 22:19:16
 * @Description  : 预排生产计划
 * @FilePath     : /aps-admin/src/views/advance-production-plan/index.vue
-->
<template>
  <div class="advance-production-plan">
    <el-card>
      <el-row>
        <el-col :span="22">
          <el-form :model="form" inline size="small">
            <el-form-item>
              <el-select v-model="form.address" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.type" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.time" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.deliveryDate" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="small">工作日历设置</el-button>
        </el-col>
      </el-row>
      <div class="total-capacity">
        <div>
          <span>标准总产能</span>
          <i>1000000</i>
        </div>
        <div>
          <span>剩余产能</span>
          <i>40000</i>
        </div>
        <div>
          <span>产能溢出</span>
          <i>0</i>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待排订单" name="1">
          <el-row>
            <el-col :span="21">
              <el-form :model="searchForm" inline size="small">
                <el-form-item label="">
                  <el-input
                    v-model="searchForm.orderNum"
                    placeholder="订单号"
                  />
                </el-form-item>
                <el-form-item label="">
                  <el-input
                    v-model="searchForm.name"
                    placeholder="客户名称"
                  />
                </el-form-item>
                <el-form-item label="">
                  <el-input
                    v-model="searchForm.demand"
                    placeholder="需求量"
                  />
                </el-form-item>
                <el-form-item label="">
                  <el-select v-model="searchForm.department" placeholder="">
                    <el-option label="" value="" />
                  </el-select>
                </el-form-item>
                <el-form-item label="">
                  <el-select v-model="searchForm.clerk" placeholder="">
                    <el-option label="" value="" />
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="3" style="text-align: right">
              <el-button type="primary" size="small">查询</el-button>
              <el-button type="" size="small">重置</el-button>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="已排订单" name="2">配置管理</el-tab-pane>
      </el-tabs>
    </el-card>
    <el-row class="select-rows">
      <el-col :span="24">
        <span class="select">已选1项,待排产量15000件</span>
        <el-button type="primary" plain size="small"> 排产确认 </el-button>
        <el-button type="primary" plain size="small"> 全部排产 </el-button>
        <el-button type="primary" plain size="small"> 外协 </el-button>
      </el-col>
    </el-row>
    <el-card>
      <second-table-list
        :total="total"
        :page-size="page.pageSize"
        :current="page.page"
        @changePage="changePage"
      >
        <my-table
          slot="table"
          :columns="columns"
          :data="tdata"
          :show-selection="true"
          show-column-setting
          @selectChange="selectChange"
        />
      </second-table-list>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span class="capacity">产能负荷图</span>
        <div style="flex: 1; text-align: right">
          <el-form
            class="capacityForm"
            :model="capacityForm"
            inline
            size="small"
          >
            <el-form-item label="">
              <el-select v-model="capacityForm.address" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="capacityForm.address" placeholder="">
                <el-option label="" value="" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="capacityForm.time"
                type="year"
                placeholder="选择年"
              />
            </el-form-item>
            <el-form-item label="">
              <el-radio-group v-model="radio1">
                <el-radio-button label="1">按月</el-radio-button>
                <el-radio-button label="2">按年</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <capacity-load />
    </el-card>
  </div>
</template>

<script>
import secondTableList from '@/components/table/secondTableList.vue'
import myTable from '@/components/table/myTable.vue'
import capacityLoad from '@/components/Charts/capacityLoad'
export default {
  components: { myTable, secondTableList, capacityLoad },
  data() {
    return {
      form: {},
      activeName: '1',
      searchForm: {},
      total: 0,
      page: {
        page: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '预排订单号',
          prop: 'num'
        },
        {
          label: '客户名称',
          prop: 'name'
        },
        {
          label: '业务员',
          prop: 'name'
        },
        {
          label: '产品大类',
          prop: 'num'
        },
        {
          label: '交期',
          prop: 'num'
        },
        {
          label: '客户需求量/件',
          prop: 'name'
        },
        {
          label: '待排量/件',
          prop: 'num'
        },
        {
          label: '批次号',
          prop: 'name'
        },
        {
          label: '批次最早上线时间',
          prop: 'name1',
          flxed: 'right'
        },
        {
          label: '批次交期',
          prop: 'num'
        },
        {
          label: '溢出量',
          prop: 'name'
        },
        {
          label: '待排产量',
          prop: 'num'
        }
      ],
      tdata: [],
      selectChangeList: [],
      radio1: '1',
      capacityForm: {}
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(val) {},
    changePage(val) {
      this.page = val
    },
    selectChange(val) {
      this.selectChangeList = val
    }
  }
}
</script>

<style scoped lang="scss">
.advance-production-plan {
  .el-card {
    margin-bottom: 20px;
  }
  .total-capacity {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #1b84ed;
    box-shadow: 0px 6px 12px 0px rgba(16, 32, 58, 0.08);
    border-radius: 4px;
    padding: 30px;
    > :nth-child(1),
    > :nth-child(2) {
      border-right: 1px solid #1b84ed;
    }
    div {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;

      span {
        color: #8fa1c9;
        font-size: 16px;
      }
      i {
        font-size: 38px;
        color: #1b84ed;
        font-weight: 800;
        margin-left: 20px;
      }
    }
  }
  .select-rows {
    margin-bottom: 20px;
    .select {
      margin-right: 15px;
    }
  }
  .clearfix {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .capacity {
      font-weight: 800;
      color: #171f31;
      font-size: 20px;
    }
  }
  .capacityForm {
    .el-form-item {
      margin-bottom: unset;
    }
  }
}
</style>
